<!--  -->
<template>
  <div class="bankCard">
    <header>
      <backMy title="银行卡" />
    </header>
    <main>
      <div class="box">
        <div class="div">
          <img src="../../assets/img/images/大图_03.gif" alt="" />
          <!-- <div class="moban"></div> -->
          <!-- <div class="banks">
            <p class="p">{{ List.bank }}{{ List.num }}</p>
          </div> -->
        </div>
        <div class="add" @click="isShow">
          <span class="numback"> +添加新银行卡</span>
          <div class="dialog" v-if="showPopover">
            <p @click="toBinding">
              初次添加银行卡
            </p>
            <p @click="sss">二次添加银行卡</p>
            <Aaa :showoff="shows" />
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import backMy from "../../components/backMy";
import Aaa from "../../components/dialogs";
import { mapState } from "vuex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    backMy,
    Aaa,
  },
  data() {
    //这里存放数据
    return {
      showPopover: false,
      show: false, //第一次的弹框
      shows: false,
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapState("data", ["List"]),
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //第一次绑定银行卡
    toBinding() {
      this.$router.push("/bankCardBinding");
    },
    //弹框
    isShow() {
      this.showPopover = true;
    },
    sss() {
      this.shows = true;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
};
</script>
<style lang="scss" scoped>
@import "@css/style.scss";
.bankCard {
  width: 100%;
  height: 100%;
  background: #f3f3f3;
}
.bankCard {
  font-size: px2rem(12);
}
header {
  position: sticky;
  left: 0;
  top: 0;
}
main {
  width: 100%;
  height: 100%;
  background: #eee;
  overflow-y: scroll;
  display: flex;
  justify-content: center;
  border-top: 10px solid #eee;
}
.box {
  width: 90%;
  height: 100%;
  text-align: center;
}
.add {
  // border-top: 1px solid #eee;
  width: 100%;
  height: px2rem(50);
  line-height: px2rem(50);
  background: #fff;
  border-radius: 2px;
  position: relative;
  margin-top: px2rem(14);
  span {
    font-size: px2rem(14);
  }
  .dialog {
    width: px2rem(130);
    height: px2rem(105);
    font-size: px2rem(12);
    border: 1px solid #ccc;
    background: #fff;
    position: absolute;
    right: 10px;
    top: 10px;
    p {
      border: 1px solid #ccc;
      background: #ccc;
      background: #eee;
    }
  }
}
.div {
  width: 100%;
}
.numback {
  color: #333;
}
.p {
  width: 100%;
  height: px2rem(50);
  line-height: px2rem(50);
  background: #fff;
  // border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: px2rem(16);
}
</style>
